<template>
  <div class="mod-config">
    <div class="queryData">
      <el-form class="queryForm" :inline="true" label-width="0" :model="form">
        <el-form-item label="">
          <el-input v-model="form.name" size="small" placeholder="字典名称" />
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.type" size="small" placeholder="字典类型" />
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.value" size="small" placeholder="字典值" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="inquire"
            >查询</el-button
          >
          <el-button size="mini" type="info" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <vxeLable
      ref="vxeLable"
      :table-config="tableConfig"
      @edit="editData"
      @del="delData"
      @add="addData"
      @import="importData"
      @export="exportData"
      @checkboxChange="checkboxChange"
    >
      <div slot="header">
        <el-button
          size="mini"
          icon="el-icon-circle-plus-outline"
          type="primary"
          @click="addData"
          >新增</el-button
        >
        <el-button
          size="mini"
          icon="el-icon-delete"
          :disabled="checkboxList.length < 1"
          type="danger"
          @click="delData(checkboxList)"
          >删除</el-button
        >
      </div>
    </vxeLable>

    <!-- 弹窗, 新增 / 修改 -->
    <elDialog :dialog="dialog">
      <add @close="close" :detailsData="detailsData" />
    </elDialog>
  </div>
</template>

<script>
import vxeLable from "@/components/common/vxeLable";
import vxeLableJs from "@/components/mixins/vxeLable.js";
import elDialog from "@/components/common/dialog";
import add from "./add";
export default {
  components: {
    vxeLable,
    elDialog,
    add
  },
  mixins: [vxeLableJs],
  data() {
    return {
      form: {},
      detailsData: {},
      checkboxList: [],
      dialog: {
        show: false,
        title: "详情",
        width: "30%"
      },
      tableConfig: {
        api: "",
        height: 700,
        operateBtns: [
          { emit: "edit", name: "修改", type: "primary" },
          { emit: "del", name: "删除", type: "danger" }
        ],
        params: {},
        // toolbarTools: [
        //   { emit: "add", name: "新增" },
        //   { emit: "import", name: "导入" },
        //   { emit: "export", name: "导出" }
        // ],
        tablePage: true,
        tableData: [
          {
            id: 1,
            name: "民族",
            type: "NATION_TYPE",
            code: "01",
            value: "汉",
            orderNum: 0,
            remark: null,
            delFlag: 0
          },
          {
            id: 2,
            name: "民族",
            type: "NATION_TYPE",
            code: "02",
            value: "蒙古",
            orderNum: 0,
            remark: null,
            delFlag: 0
          },
          {
            id: 3,
            name: "民族",
            type: "NATION_TYPE",
            code: "03",
            value: "回",
            orderNum: 0,
            remark: null,
            delFlag: 0
          },
          {
            id: 4,
            name: "民族",
            type: "NATION_TYPE",
            code: "04",
            value: "藏",
            orderNum: 0,
            remark: null,
            delFlag: 0
          },
          {
            id: 5,
            name: "民族",
            type: "NATION_TYPE",
            code: "05",
            value: "维吾",
            orderNum: 0,
            remark: null,
            delFlag: 0
          },
          {
            id: 6,
            name: "民族",
            type: "NATION_TYPE",
            code: "06",
            value: "苗",
            orderNum: 0,
            remark: null,
            delFlag: 0
          },
          {
            id: 7,
            name: "民族",
            type: "NATION_TYPE",
            code: "07",
            value: "彝",
            orderNum: 0,
            remark: null,
            delFlag: 0
          },
          {
            id: 8,
            name: "民族",
            type: "NATION_TYPE",
            code: "08",
            value: "壮",
            orderNum: 0,
            remark: null,
            delFlag: 0
          },
          {
            id: 9,
            name: "民族",
            type: "NATION_TYPE",
            code: "09",
            value: "布依",
            orderNum: 0,
            remark: null,
            delFlag: 0
          },
          {
            id: 10,
            name: "民族",
            type: "NATION_TYPE",
            code: "10",
            value: "朝鲜",
            orderNum: 0,
            remark: null,
            delFlag: 0
          }
        ],
        tableToolbar: {
          // refresh: true,
          zoom: true,
          custom: true,
          slots: {
            buttons: "toolbar_buttons"
            // tools: "toolbar_tools"
          }
        },
        tableColumn: [
          { type: "checkbox", width: 60, align: "center" },
          { type: "seq", width: 60, title: "序号" },
          { field: "name", title: "字典名称" },
          { field: "type", title: "字典类型" },
          { field: "code", title: "字典码" },
          { field: "value", title: "字典值" },
          { field: "orderNum", title: "排序" },
          { field: "remark", title: "备注" },
          { field: "delFlag", title: "删除标记" },
          {
            title: "操作",
            width: 150,
            align: "center",
            className: "operate",
            slots: { default: "operate" },
            fixed: "right"
          }
        ]
      },
      dataForm: {},
      dataList: [],
      dataListLoading: false,
      addOrUpdateVisible: false
    };
  },
  activated() {
    this.getDataList();
  },
  mounted() { },
  methods: {
    addData() {
      this.detailsData = {};
      this.dialog.title = "新增";
      this.dialog.show = true;
    },
    close() {
      this.dialog.show = false;
    },
    aaa(row) {
      console.log(row);
    },
    editData(row) {
      this.dialog.title = "详情";
      this.detailsData = row;
      this.dialog.show = true;
    },
    delData(val) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        console.log(val, 74);
        this.$message({
          type: "success",
          message: "删除成功!"
        });
      });
    },
    importData() {
      this.$refs.vxeLable.uploadFileEvent(files => {
        const formBody = new FormData();
        formBody.append("file", files[0]);
        console.log("导入import", formBody);
      }); 
    },
    checkboxChange(val) {
      //checkboxList
      console.log(val, "checkbox");
      this.checkboxList = val;
    },
    exportData() {
      console.log("导出export");
    }
  }
};
</script>
<style scoped lang="scss">
.queryData {
  font-size: 0.14rem;
  color: #fff;
}
.queryForm {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
